<template>

  <!-- 线索详情表单 -->
  <el-form label-width="110px">

    <!-- 负责人 -->
    <el-form-item label="负责人">
      <div class="detail">&nbsp; {{ this.clueDetail.ownerDO.name }}</div>
    </el-form-item>

    <!-- 所属活动 -->
    <el-form-item label="所属活动">
      <div class="detail">&nbsp; {{ this.clueDetail.activityDO.name }}</div>
    </el-form-item>

    <!-- 姓名 -->
    <el-form-item label="姓名">
      <div class="detail">&nbsp; {{ this.clueDetail.fullName }}</div>
    </el-form-item>

    <!-- 称呼 -->
    <el-form-item label="称呼">
      <div class="detail">&nbsp; {{ this.clueDetail.appellationDO.typeValue }}</div>
    </el-form-item>

    <!-- 手机 -->
    <el-form-item label="手机">
      <div class="detail">&nbsp; {{ this.clueDetail.phone }}</div>
    </el-form-item>

    <!-- 微信 -->
    <el-form-item label="微信">
      <div class="detail">&nbsp; {{ this.clueDetail.weixin }}</div>
    </el-form-item>

    <!-- qq -->
    <el-form-item label="qq">
      <div class="detail">&nbsp; {{ this.clueDetail.qq }}</div>
    </el-form-item>

    <!-- 邮箱 -->
    <el-form-item label="邮箱">
      <div class="detail">&nbsp; {{ this.clueDetail.email }}</div>
    </el-form-item>

    <!-- 年龄 -->
    <el-form-item label="年龄">
      <div class="detail">&nbsp; {{ this.clueDetail.age }}</div>
    </el-form-item>

    <!-- 职业 -->
    <el-form-item label="职业">
      <div class="detail">&nbsp; {{ this.clueDetail.job }}</div>
    </el-form-item>

    <!-- 年收入 -->
    <el-form-item label="年收入">
      <div class="detail">&nbsp; {{ this.clueDetail.yearIncome }}</div>
    </el-form-item>

    <!-- 住址 -->
    <el-form-item label="住址">
      <div class="detail">&nbsp; {{ this.clueDetail.address }}</div>
    </el-form-item>

    <!-- 贷款 -->
    <el-form-item label="贷款">
      <div class="detail">&nbsp; {{ this.clueDetail.needLoanDO.typeValue }}</div>
    </el-form-item>

    <!-- 意向状态 -->
    <el-form-item label="意向状态">
      <div class="detail">&nbsp; {{ this.clueDetail.intentionStateDO.typeValue }}</div>
    </el-form-item>

    <!-- 意向产品 -->
    <el-form-item label="意向产品">
      <div class="detail">&nbsp; {{ this.clueDetail.intentionProductDO.name }}</div>
    </el-form-item>

    <!-- 线索状态 -->
    <el-form-item label="线索状态">
      <div class="detail">&nbsp; {{ this.clueDetail.stateDO.typeValue }}</div>
    </el-form-item>

    <!-- 线索来源 -->
    <el-form-item label="线索来源">
      <div class="detail">&nbsp; {{ this.clueDetail.sourceDO.typeValue }}</div>
    </el-form-item>

    <!-- 线索描述 -->
    <el-form-item label="线索描述">
      <div class="detail">&nbsp; {{ this.clueDetail.description }}</div>
    </el-form-item>

    <!-- 下次联系时间 -->
    <el-form-item label="下次联系时间">
      <div class="detail">&nbsp; {{ this.clueDetail.nextContactTime }}</div>
    </el-form-item>

  </el-form>

  <!-- 线索备注表单 -->
  <el-form :model="this.clueRemarkQuery" :rules="clueRemarkRules" ref="clueRemarkRefForm" label-width="110px">

    <!-- 填写线索备注记录 -->
    <el-form-item label="填写备注" prop="noteContent">
      <el-input v-model.trim="this.clueRemarkQuery.noteContent"
                type="textarea"
                :rows="6" />
    </el-form-item>

    <!-- 联系方式 -->
    <el-form-item label="联系方式" prop="noteWay">
      <el-select v-model="this.clueRemarkQuery.noteWay" placeholder="请选择联系方式">
        <el-option v-for="noteWay in this.noteWayOptions"
                   :key="noteWay.id"
                   :label="noteWay.typeValue"
                   :value="noteWay.id" />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="clueRemarkSubmit()">提交</el-button>
      <!-- 如果当前线索已经转换为客户，则不能再次转换客户，所以不渲染此按钮 -->
      <el-button type="success" @click="convertCustomer()" v-if="this.clueDetail.state !== -1">转换客户</el-button>
      <el-button @click="goBack()">返回</el-button>
    </el-form-item>

  </el-form>

  <!-- 线索备注列表 -->
  <!-- :data="clueRemarkList"  单向绑定表格数据 -->
  <el-table
      :data="clueRemarkList"
      style="width: 100%">

    <!-- type="index"  序号以1递增 -->
    <el-table-column type="index" label="序号" width="80px" />
    <el-table-column property="noteWayDO.typeValue" label="联系方式" width="120" />
    <el-table-column property="noteContent" label="备注内容" width="380" />
    <el-table-column property="createTime" label="联系时间" />
    <el-table-column property="createByDO.name" label="联系者" />
    <el-table-column property="editTime" label="编辑时间" />
    <el-table-column property="editByDO.name" label="编辑者" />
    <el-table-column label="操作">
      <!-- 作用域插槽 -->
      <template #default="scope">
        <!-- scope.row     获取当前行上的数据对象 -->
        <el-button type="success" @click="edit(scope.row)">编辑</el-button>
        <!-- scope.row.id  获取当前行上数据对象的id -->
        <el-button type="danger"  @click="remove(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页功能 -->
  <!--
      layout="prev, pager, next"  组件布局，子组件名用逗号分隔  prev, pager, next, jumper, ->, total
      @prev-click="toPage" 点击上一页触发函数
      @next-click="toPage" 点击下一页触发函数
      @current-change="toPage"  当前页发生改变时触发函数
      注意：这里的函数不要加括号，element-plus会自动传递一个参数（当前页数）
  -->
  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="this.pageSize"
      :total="this.total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"/>

  <!-- 线索转换客户的弹窗（对话框） -->
  <!--
    v-model                值为true时，显示对话框，false隐藏对话框
    center                 内容居中
    draggable              可拖拽的对话框
    :close-on-click-modal  是否可以通过点击对话框外的页面关闭对话框
    :destroy-on-close      对话框关闭时，是否销毁其中元素（例如：验证规则的提示信息）
    :show-close            是否显示关闭（×号）按钮
  -->
  <el-dialog
      v-model="convertCustomerDialogVisible"
      title="线索转换客户"
      width="55%"  center  draggable
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :show-close="false">

    <!-- :model="customerQuery"   表单绑定的数据 -->
    <!-- label-width="110px"      表单整体距离左侧的宽度 -->
    <!-- :rules="customerRules"   绑定验证规则 -->
    <!-- ref="customerRefForm"    表单提交之前验证表单的验证规则 -->
    <el-form :model="customerQuery" label-width="110px" :rules="customerRules" ref="customerRefForm">

      <!-- 意向产品 -->
      <!-- prop="product" 要验证的内容 -->
      <el-form-item label="意向产品" prop="product">
        <el-select v-model="customerQuery.product" placeholder="请选择意向产品">
          <el-option
              v-for="product in this.productOptions"
              :key="product.id"
              :label="product.name"
              :value="product.id"/>
        </el-select>
      </el-form-item>

      <!-- 客户描述 -->
      <el-form-item label="客户描述" prop="description">
        <el-input type="textarea" :rows="6" v-model.trim="customerQuery.description" />
      </el-form-item>

      <!-- 下次联系时间 -->
      <el-form-item label="下次联系时间" prop="nextContactTime">
        <!-- type="datetime"  日期选择器的类型（样式） -->
        <!-- value-format     绑定值的格式，向后端提交的格式 -->
        <!-- :disabled-date   禁用指定日期之前或之后的日期，绑定的函数会自动传入一个参数，所以不要加括号 -->
        <!-- 注意：这里的格式是YYYY-MM-DD HH:mm:ss，后端的格式是yyyy-MM-dd HH:mm:ss -->
        <el-date-picker
            v-model="customerQuery.nextContactTime"
            type="datetime"
            placeholder="请选择下次联系时间"
            :disabled-date="disabledDate"
            value-format="YYYY-MM-DD HH:mm:ss"
            clearable
            style="width: 100%;"/>
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="convertCustomerSubmit()">提交</el-button>
        <el-button @click="this.convertCustomerDialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 编辑线索备注的弹窗（对话框） -->
  <!--
    v-model                值为true时，显示对话框，false隐藏对话框
    center                 内容居中
    draggable              可拖拽的对话框
    :close-on-click-modal  是否可以通过点击对话框外的页面关闭对话框
    :destroy-on-close      对话框关闭时，是否销毁其中元素（例如：验证规则的提示信息）
    :show-close            是否显示关闭（×号）按钮
  -->
  <el-dialog
      v-model="editClueRemarkDialogVisible"
      title="编辑线索备注"
      width="55%"  center  draggable
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :show-close="false">

    <!-- :model="clueRemarkQuery"       表单绑定的数据 -->
    <!-- label-width="110px"            表单整体距离左侧的宽度 -->
    <!-- :rules="editClueRemarkRules"   绑定验证规则 -->
    <!-- ref="editClueRemarkRefForm"    表单提交之前验证表单的验证规则 -->
    <el-form :model="clueRemarkQuery" label-width="110px" :rules="editClueRemarkRules" ref="editClueRemarkRefForm">
      <!-- 线索备注 -->
      <el-form-item label="备注" prop="noteContent">
        <el-input type="textarea" :rows="6" v-model.trim="clueRemarkQuery.noteContent" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="editClueRemarkSubmit()">提交</el-button>
        <el-button @click="editClueRemarkDialogVisibleClose()">关闭</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script>
import {doDelete, doGet, doPost, doPut} from "../http/httpRequest.js";
import {messageConfirm, messageTip} from "../util/util.js";

  export default {
    name: "ClueDetailView",

    // 注入父级路由的函数
    inject: ['reload'],

    data() {
      return {
        // 线索详情对象
        clueDetail: {
          // 将线索详情对象的引用数据类型变量声明出来，否则无法使用该变量内部的属性，会报错
          ownerDO: {},
          activityDO: {},
          appellationDO: {},
          needLoanDO: {},
          intentionStateDO: {},
          intentionProductDO: {},
          stateDO: {},
          sourceDO: {}
        },

        // 线索备注对象
        clueRemarkQuery: { },

        // 联系方式下拉列表
        noteWayOptions: [],

        // 线索备注验证规则
        clueRemarkRules: {
          // 备注内容
          noteContent: [
            { required: true, message: '请输入备注内容', trigger: 'blur' },
            { min: 5, max: 255, message: '备注内容字数在5-255之间', trigger: 'blur' }
          ],
          // 联系方式
          noteWay: [
            { required: true, message: '请选择联系方式', trigger: 'blur' }
          ]
        },

        // 线索备注列表（是个数组/集合，其中的每一项数据都是一个对象）
        clueRemarkList: [{}],

        pageSize: 0,  // 每页条数
        total: 0,     // 总条数

        // 线索转换客户对话框是否显示
        convertCustomerDialogVisible: false,

        // 客户对象
        customerQuery: { },

        // 意向产品下拉选项
        productOptions: [],

        // 转换客户表单的验证规则
        customerRules: {
          // 意向产品
          product: [
            { required: true, message: '请选择意向产品', trigger: 'blur' }
          ],
          // 客户描述
          description: [
            { required: true, message: '请输入客户描述', trigger: 'blur' },
            { min: 5, max: 255, message: '客户描述字数在5-255之间', trigger: 'blur' }
          ],
          // 下次联系时间
          nextContactTime: [
            { required: true, message: '请选择下次联系时间', trigger: 'blur' }
          ]
        },

        // 编辑线索备注的对话框
        editClueRemarkDialogVisible: false,

        // 编辑线索备注的验证规则
        editClueRemarkRules: {
          // 备注记录
          noteContent: [
            { required: true, message: '请输入备注内容', trigger: 'blur' },
            { min: 5, max: 255, message: '备注内容字数在5-255之间', trigger: 'blur' }
          ]
        }
      }
    },

    // 钩子函数，页面渲染完成后自动调用
    mounted() {
      // 加载线索详情信息
      this.loadClueDetail();

      // 加载联系方式下拉选项
      this.loadNoteWayOptions();

      // 加载备注列表（首先展示第一页数据）
      this.loadClueRemarkList(1);
    },

    methods: {
      // 加载线索详情信息
      loadClueDetail() {
        // 获取当前线索的id
        let id = this.$route.params.id;
        // 向后端发送请求
        doGet("/api/clue/detail/" + id, { }).then( (resp) => {
          if (resp.data.code === 200) {
            // 加载线索详情
            this.clueDetail = resp.data.data;
          } else {
            messageTip("线索详情加载失败", "error");
          }
        })
      },

      // 加载联系方式下拉列表
      loadNoteWayOptions() {
        // 向后端发送请求
        doGet("/api/dicValue/loadNoteWay", { }).then( (resp) => {
          if (resp.data.code === 200) {
            // 加载联系方式下拉选项
            this.noteWayOptions = resp.data.data;
          } else {
            messageTip("联系方式加载失败", "error");
          }
        })
      },

      // 加载备注记录列表
      loadClueRemarkList(current) {
        // 向后端发送请求
        doGet("/api/clue/remark/list", {
          // 根据当前线索id查询的备注记录
          clueId: this.$route.params.id,
          // 要查询第几页数据
          current: current
        }).then( (resp) => {
          if (resp.data.code === 200) {
            // 加载备注记录列表
            this.clueRemarkList = resp.data.data.list;

            // 获取每页记录条数
            this.pageSize = resp.data.data.pageSize;
            // 获取总记录条数
            this.total = resp.data.data.total;
          } else {
            messageTip("备注列表加载失败", "error");
          }
        })
      },

      // 提交线索备注
      clueRemarkSubmit() {
        // 验证表单规则
        this.$refs.clueRemarkRefForm.validate( (isValid) => {
          // 判断验证是否通过
          if (isValid) {
            // 向后端发送请求
            doPost("/api/clue/remark/add", {
              clueId: this.clueDetail.id,  // 线索id
              noteContent: this.clueRemarkQuery.noteContent, // 备注内容
              noteWay: this.clueRemarkQuery.noteWay   // 联系方式
            }).then( (resp) => {
              if (resp.data.code === 200) {
                messageTip("提交成功", "success");
                // 刷新当前页面（更新备注列表）
                this.reload();
              } else {
                messageTip("提交失败", "error");
              }
            })
          }
        })
      },

      // 转换客户按钮
      convertCustomer() {
        // 向后端发送请求，获取意向产品下拉选项（查询所有在售的产品）
        doGet("/api/product/list", { }).then( (resp) => {
          if (resp.data.code === 200) {
            this.productOptions = resp.data.data;
          } else {
            messageTip("意向产品获取失败", "error");
          }
        })

        // 显示线索转换客户的对话框
        this.convertCustomerDialogVisible = true;
      },

      // 指定禁用的日期选择
      disabledDate(time) {
        // 今天之前的日期禁止选择（今天可选）
        return time.getTime() < Date.now() - 8.64e7;
      },

      // 线索转换客户提交
      convertCustomerSubmit() {
        // 验证表单规则
        this.$refs.customerRefForm.validate( (isValid) => {
          // 判断验证是否通过
          if (isValid) {
            // 向后端发送请求
            doPost("/api/customer/add", {
              clueId: this.$route.params.id,  // 线索id
              product: this.customerQuery.product,  // 意向产品
              description: this.customerQuery.description,  // 客户描述
              nextContactTime: this.customerQuery.nextContactTime  // 下次联系时间
            }).then( (resp) => {
              if (resp.data.code === 200) {
                messageTip("转换成功", "success");
                // 刷新页面
                this.reload();
              } else {
                messageTip("转换失败", "error");
              }
            })
          }
        })
      },

      // 返回按钮
      goBack() {
        // 返回上一级
        this.$router.go(-1);
      },

      // 编辑备注
      edit(clueRemark) {
        // 弹出编辑备注的对话框
        this.editClueRemarkDialogVisible = true;

        // 获取要编辑备注的id
        this.clueRemarkQuery.id = clueRemark.id;
        // 将原备注内容显示到编辑框内
        this.clueRemarkQuery.noteContent = clueRemark.noteContent;
      },

      // 编辑跟踪记录提交按钮
      editClueRemarkSubmit() {
        // 验证表单规则
        this.$refs.editClueRemarkRefForm.validate( (isValid) => {
          if (isValid) {
            // 验证通过，向后端发送请求
            doPut("/api/clue/remark/edit", {
              id: this.clueRemarkQuery.id,
              noteContent: this.clueRemarkQuery.noteContent
            }).then( (resp) => {
              if (resp.data.code === 200) {
                messageTip("编辑成功", "success");
                // 刷新页面
                this.reload();
              } else {
                messageTip("编辑失败", "error");
              }
            })
          }
        })
      },

      // 编辑跟踪记录对话框关闭按钮
      editClueRemarkDialogVisibleClose() {
        // 清空线索跟踪记录对象的内容
        this.clueRemarkQuery = { };

        // 关闭对话框
        this.editClueRemarkDialogVisible = false;
      },

      // 删除跟踪记录
      remove(id) {
        // 弹出确认框
        messageConfirm("确认删除该数据吗?").then(() => {
          // 向后端发送请求
          doDelete("/api/clue/remark/remove/" + id, { }).then( (resp) => {
            if (resp.data.code === 200) {
              messageTip("删除成功", "success");
              // 刷新页面
              this.reload();
            } else {
              messageTip("删除失败", "error");
            }
          })
        }).catch(() => {
          messageTip("取消删除", "warning");
        })
      },

      // 分页
      toPage(current) {
        // 分页查询
        this.loadClueRemarkList(current);
      }
    }
  }
</script>

<style scoped>

  /* 线索详情信息 */
  .detail {
    height: 30px;
    width: 100%;
    background-color: #f6f7fb;    /* 背景色 */
    padding-left: 2px;            /* 左侧内边距 */
    border: 1px solid #e6e7eb;    /* 1px 边框宽度， solid 实线边框， #e6e7eb 边框颜色 */
    border-radius: 4px;           /* 边框角的弧度 */
  }

  /* 线索备注列表 */
  .el-table {
    margin-top: 20px;  /* 上侧外边距 */
  }

  /* 分页栏 */
  .el-pagination {
    margin-top: 20px;  /* 上侧外边距 */
  }

</style>

